

class TabsBar extends HTMLElement
{
    constructor()
    {
        super();
        this.classList.add("tabs-bar");

        this.style.position = "relative";
        this.style.width = "100%";
        this.style.height = "100%";

        this.style.display = "flex";
        this.style.flexDirection = "row";
        this.style.justifyContent = "center";
        this.style.alignContent = "center";
        this.style.alignItems = "center";

        this.addEventListener("click", () => {
            if (this.parentElement.tabIndex === undefined)
                this.parentElement.tabIndex = 0;

            const allBars = this.parentElement.children;
            for (let index = 0; index < allBars.length; index++) {
                if (this === allBars[index])
                {
                    this.parentElement.tabIndex = index;
                    break;
                }
            }

            this.style.animation = "click 0.5s ease-in-out"
        });
        this.addEventListener("animationend", () => {
            this.style.animation = "";
        });

        const shadow = this.attachShadow({ mode:"open" });

        const title = document.createElement("label");
        title.style.justifyContent = "center";
        title.style.alignContent = "center";
        title.style.alignItems = "center";
        title.style.fontSize = "x-large";

        const slot = document.createElement("slot");
        title.appendChild(slot);

        const styleContent = document.createElement("style");
        styleContent.textContent = `
            .tabs-bar:hover {
                background-color: #f7f7f7
            }

            @keyframes click {
                0% {
                    background-color: white;
                    transition: background-color;
                }
                10% {
                    background-color: #fafafa;
                    transition: background-color;
                }
                20% {
                    background-color: #f7f7f7;
                    transition: background-color;
                }
                30% {
                    background-color: #eeeeee;
                    transition: background-color;
                }
                40% {
                    background-color: #e2e2e2;
                    transition: background-color;
                }
                50% {
                    background-color: #dddddd;
                    transition: background-color;
                }
                60% {
                    background-color: #e2e2e2;
                    transition: background-color;
                }
                70% {
                    background-color: #eeeeee;
                    transition: background-color;
                }
                80% {
                    background-color: #f7f7f7;
                    transition: background-color;
                }
                90% {
                    background-color: #fafafa;
                    transition: background-color;
                }
                100% {
                    background-color: white;
                    transition: background-color;
                }
            }

        `;
        shadow.appendChild(title);
        shadow.appendChild(styleContent);
    }


}


customElements.define("tabs-bar", TabsBar);

